<template>
  <div id="type">
    <div class="dashboard_title">设备类型</div>
    <div id="chart-type" ref="type"></div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import { getDeviceType } from '@/api/home';

const type = ref();
let chart: any;
const data: any[] = ref([]);
const total = ref(0);
onMounted(() => {
  getData();
});
onUnmounted(() => {
  if (!chart) {
    return;
  }
  chart.clear();
  chart.dispose();
  chart = null;
});
const getData = async () => {
  const res = await getDeviceType();
  if (res.code == 200) {
    const list = res.data as any;
    list.forEach((item: any) => {
      total.value += item.modelCount;
      data.value.push({
        name: item.model,
        value: item.modelCount,
      });
    });
    nextTick(() => {
      init(data.value);
    });
  }
};

const init = (data: any) => {
  if (!type.value) return;
  chart = echarts.init(type.value);
  var option = {
    title: {
      textAlign: 'center',
      text: '{a|设备总数}\n{c|' + total.value + '}',
      x: '29%',
      y: '30%',
      textStyle: {
        rich: {
          a: {
            fontSize: 14,
            color: 'rgba(225,225,225,.4)',
            padding: 5,
          },

          c: {
            fontSize: 30,
            fontWeight: 600,
            color: '#fff',
            padding: 5,
          },
        },
      },
    },
    tooltip: {
      show: false,
    },
    legend: {
      orient: 'vertical',
      icon: 'circle',
      top: '20%',
      right: '10%',
      selectedMode: false,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
      formatter: (name: any) => {
        let value = data.filter((item: any) => item.name == name)[0];
        return `{title|${name}}{value|${value.value}}`;
      },
      textStyle: {
        fontSize: 14,
        rich: {
          title: {
            width: 60,
            fontSize: 14,
            color: 'rgb(255, 255, 255,.6)',
          },
          value: {
            width: 30,
            align: 'center',
            fontSize: 14,
            color: '#fff',
          },
        },
      },
    },
    series: [
      {
        type: 'pie',
        hoverAnimation: false,
        radius: ['45%', '75%'],
        center: ['30%', '40%'],
        color: ['#95A4A3', '#698280'],
        itemStyle: {
          borderRadius: 60,
        },
        label: {
          normal: {
            position: 'inner',
            formatter: function (param: any) {
              if (!param.percent) return '';
              var f = Math.round(param.percent * 10) / 10;
              var s = f.toString();
              var rs = s.indexOf('.');
              if (rs < 0) {
                rs = s.length;
                s += '.';
              }
              while (s.length <= rs + 1) {
                s += '0';
              }
              return s + '%';
            },
            textStyle: {
              color: '#fff',
              fontSize: 12,
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: data,
      },
      {
        name: '背景',
        type: 'pie',
        radius: ['45%', '75%'],
        center: ['30%', '40%'],
        label: {
          show: false,
        },
        data: [
          {
            value: 20,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  colorStops: [{ offset: 0, color: '#698280' }],
                },
              },
            },
          },
        ],
        z: 0,
      },
    ],
  };
  chart.setOption(option);
  addEventListener('resize', function () {
    chart && chart.resize();
  });
};
</script>

<style lang="scss" scoped>
#type {
  width: 100%;
  height: 100%;
  // height: 250px;
}

#chart-type {
  height: calc(100% - 6vh);
}
</style>
